<html>
  <head>
    <title>transition元素转换</title>
  </head>
  <body>
    <script>
       /*
                 三、transition

                          1、@ref，将要执行动画的元素。例如指定动画元素 ref 属性为 test，可以通过调用 this.$refs.test来获取元素的引用。

                          2、@options  ,动画参数


                                    ①、下表列出了 options 所有合法的参数：

                                                可选值                 描述

                                                styles                 设置不同样式过渡效果的键值对

                                                duration               指定动画的持续时间(单位毫秒)，默认是0，表示瞬间达到动画结束状态。

                                                delay                  指定请求动画操作到指定动画之间的时间间隔(单位毫秒)，默认值是0.
                                                                    表示没有延迟，在请求后立即执行动画。

                                                needLayout             动画的执行是否影响布局，默认值是false

                                                timeingFunction        描述动画执行的速度曲线，用于描述动画已将消耗的时间和动画完成进度间的映射关系。
                                                                    默认值是linear,表示动画从刚开始到结束都拥有同样的速度。

                                        ②、下表列出了styles所有合法的参数：

                                                可选值                  描述

                                                width                  表示动画执行后应用到组件上的宽度值。如果你需要影响布局，设置needLayout为 true.
                                                                        默认值为 computed width

                                                height                  表示动画执行后应用到组件上的高度值。如果你需要影响布局，设置needLayout为true,
                                                                        默认值为 computed width

                                                backgroundColor        动画执行后应用到组件上的背景颜色，默认值为 computed backgroundColor.
                                                
                                                opacity                表示动画执行后应用到组件上的不透明度值，默认为 computed opacity

                                                transformOrigin        transformOrigin 定义变化过程中的中心点，如 transformOrigin:x-axis yaxis ，
                                                                        参数 a-axis 可能的职位 left、center、right、长度值或百分比值，
                                                                        参数 y-axis可能的值为top、center、bottom 、长度值 或 百分比。默认值为 center center。

                                                transform              transform 变换类型，可能包含rotate,translate,scale及其他属性。默认值为空。

                                                

                                        ③、transform

                                                        可选值                           描述

                                                        translate/translateX/translateY  指定元素要移动到的位置。单位是长度或百分比，默认值是0

                                                        rotate/rotateX/rotareY           指定元素将被旋转的角度。单位是度，默认值是0

                                                        scale/scaleX/scaleY              按比例放大或缩小元素。单位是数字，默认值是1

                                                        perspective                      观察者距离z=0平面的距离，在Android4.1及以上有效。
                                                                                        单位是数字，默认值是1

                                        ④、timingFunction

                                                        可选值                             描述

                                                        linear                             动画从头到尾的速度是相同的

                                                        ease-in                            动画速度有慢到快

                                                        ease-out                           动画速度由快到慢

                                                        ease-in-out                        动画先加速到达中间点后减速到达终点

                                                        cubic-bezier(x1,y1,x2,y2)          在三次贝塞尔函数中定义变化过程，函数的参数值必须处于 0 到 1 之间。
                                                                                        更多关于三次贝塞尔的信息请参阅 cubic-bezier 和 Bézier curve。

                        3、@callback, 是动画执行完毕之后的回调函数。在IOS平台上，你可以获取动画是否执行成功的信息。
                         
                        注意:
                        
                                ios上可以获取 animation 是否执行成功的信息，callback 的Result

            */
    </script>
  </body>
</html>